﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://itcast.cn/common/" prefix="it"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<TITLE>角色列表</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- Bootstrap Core CSS -->
<link href="${pageContext.request.contextPath }/css/bootstrap.min.css"
	rel="stylesheet">

<!-- MetisMenu CSS -->
<link href="${pageContext.request.contextPath }/css/metisMenu.min.css"
	rel="stylesheet">

<!-- DataTables CSS -->
<link
	href="${pageContext.request.contextPath }/css/dataTables.bootstrap.css"
	rel="stylesheet">

<!-- Custom CSS -->
<link href="${pageContext.request.contextPath }/css/sb-admin-2.css"
	rel="stylesheet">

<!-- Custom Fonts -->
<link
	href="${pageContext.request.contextPath }/css/font-awesome.min.css"
	rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath }/css/boot-crm.css"
	rel="stylesheet" type="text/css">

<LINK href="${pageContext.request.contextPath }/css/Style.css"
	type=text/css rel=stylesheet>
<LINK href="${pageContext.request.contextPath }/css/Manage.css"
	type=text/css rel=stylesheet>

<link href="${pageContext.request.contextPath }/css/bootstrap.min.css" type=text/css rel="stylesheet">
<style type="text/css">
#sButton2 {
	width: 70px;
	height: 21px;
	line-height: 21px;
	padding: 0 11px;
	background: #02bafa;
	border: 1px #26bbdb solid;
	border-radius: 3px;
	color: #fff;
	display: inline-block;
	text-decoration: none;
	font-size: 12px;
	outline: none
}
</style>
<META content="MSHTML 6.00.2900.3492" name=GENERATOR>
</HEAD>
<BODY>
	<TABLE cellSpacing=0 cellPadding=0 width="98%" border=0>
		<TBODY>
			<TR>
				<TD width=15><IMG
					src="${pageContext.request.contextPath }/images/new_019.jpg"
					border=0></TD>
				<TD width="100%"
					background="${pageContext.request.contextPath }/images/new_020.jpg"
					height=20></TD>
				<TD width=15><IMG
					src="${pageContext.request.contextPath }/images/new_021.jpg"
					border=0></TD>
			</TR>
		</TBODY>
	</TABLE>
	<FORM id="customerForm" name="customerForm"
		action="${pageContext.request.contextPath }/roleList.action"
		method=post>
		<TABLE cellSpacing=0 cellPadding=0 width="98%" border=0>
			<TBODY>
				<TR>
					<TD width=15 background=${pageContext.request.contextPath }
						/images/new_022.jpg><IMG
						src="${pageContext.request.contextPath }/images/new_022.jpg"
						border=0></TD>
					<TD vAlign=top width="100%" bgColor=#ffffff>
						<TABLE cellSpacing=0 cellPadding=5 width="100%" border=0>
							<TR>
								<TD class=manageHead>当前位置：权限管理 &gt; 角色列表</TD>
							</TR>
							<TR>
								<TD height=2></TD>
							</TR>
						</TABLE>
						<TABLE borderColor=#cccccc cellSpacing=0 cellPadding=0
							width="100%" align=center border=0>
							<TBODY>
								<TR>
									<TD height=25>
										<TABLE cellSpacing=0 cellPadding=2 border=0>
											<TBODY>
												<TR>
													<TD></TD>
													<TD></TD>

													<TD></TD>
													<TD></TD>
													<TD></TD>
													<TD>&nbsp;&nbsp; <a id=sButton2 href="#"
														style="text-decoration: none" data-toggle="modal"
														data-target="#roleAddDialog"> &nbsp;添加 </a>
													</TD>
												</TR>
											</TBODY>
										</TABLE>
									</TD>
								</TR>
								<!-- 列表显示 -->
								<TR>
									<TD>
										<TABLE id=grid
											style="BORDER-TOP-WIDTH: 0px; FONT-WEIGHT: normal; BORDER-LEFT-WIDTH: 0px; BORDER-LEFT-COLOR: #cccccc; BORDER-BOTTOM-WIDTH: 0px; BORDER-BOTTOM-COLOR: #cccccc; WIDTH: 100%; BORDER-TOP-COLOR: #cccccc; FONT-STYLE: normal; BACKGROUND-COLOR: #cccccc; BORDER-RIGHT-WIDTH: 0px; text-DECORATION: none; BORDER-RIGHT-COLOR: #cccccc"
											cellSpacing=1 cellPadding=2 rules=all border=0>
											<TBODY>
												<TR
													style="FONT-WEIGHT: bold; FONT-STYLE: normal; BACKGROUND-COLOR: #eeeeee; TEXT-DECORATION: none">
													<TD>角色ID</TD>
													<TD>角色名称</TD>
													<TD>备注</TD>
													<TD>操作</TD>
												</TR>
												<c:forEach items="${page.rows}" var="role">
													<TR
														style="FONT-WEIGHT: normal; FONT-STYLE: normal; BACKGROUND-COLOR: white; TEXT-DECORATION: none">
														<TD>${role.roleId}</TD>
														<TD>${role.roleName}</TD>
														<TD>${role.roleDescription}</TD>
														<TD>
															<a href="#" data-toggle="modal" data-target="#roleEditDialog" onclick="editRole(${role.roleId})"> 修改 </a>
															<a href="#" onclick="deleteRole(${role.roleId})">删除</a>
															<a href="#" data-toggle="modal" data-target="#aothEditDialog" onclick="showRoleAndAoth(${role.roleId},'${role.roleName}')">设置权限</a>
														</TD>
													</TR>
												</c:forEach>
											</TBODY>
										</TABLE>
									</TD>
								</TR>
								<!-- 分页  -->
								<TR>
									<TD><SPAN id=pagelink>
											<div class="col-md-12 text-right">
												<it:page
													url="${pageContext.request.contextPath }/roleList.action" />
											</div>
									</SPAN></TD>
								</TR>
							</TBODY>
						</TABLE>
					</TD>
					<TD width=15
						background="${pageContext.request.contextPath }/images/new_023.jpg">
						<IMG src="${pageContext.request.contextPath }/images/new_023.jpg"
						border=0>
					</TD>
				</TR>
			</TBODY>
		</TABLE>
	</FORM>
	<TABLE cellSpacing=0 cellPadding=0 width="98%" border=0>
		<TBODY>
			<TR>
				<TD width=15><IMG
					src="${pageContext.request.contextPath }/images/new_024.jpg"
					border=0></TD>
				<TD align=middle width="100%"
					background="${pageContext.request.contextPath }/images/new_025.jpg"
					height=15></TD>
				<TD width=15><IMG
					src="${pageContext.request.contextPath }/images/new_026.jpg"
					border=0></TD>
			</TR>
		</TBODY>
	</TABLE>
	<!-- 设置角色权限对话框 -->
	<div class="modal fade" id="aothEditDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">设置角色权限</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="editAoth_form">
						<input type="hidden" id="setRoleAndAothId" name="roleId" value="">
						
						<div class="form-group">
							<label for="roleName" class="col-sm-2 control-label">角色名称</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="setRoleAndAothName" placeholder="角色名称" name="roleName" disabled>
							</div>
						</div>
						<div class="form-group">
							<label for="roleName" class="col-sm-2 control-label">角色权限</label>
							<div class="col-sm-10" id= "jkkjk">
								<input type="hidden" id="checkedStr" name="checkedStr">
								<%-- <c:forEach items="${result}" var="aothority">
 									<c:if test="aothority.value>0">
										<input name="checkbox" type="checkbox" autocomplete ="off" id="" lay-skin="primary" value="${aothority.key.aothorityId}" checked="checked">${aothority.key.aothorityName} &nbsp;&nbsp;&nbsp;&nbsp;
									</c:if>
									<c:if test="aothority.value<0">
										<input name="checkbox" type="checkbox" autocomplete ="off" id="" lay-skin="primary" value="${aothority.key.aothorityId}" >${aothority.key.aothorityName} &nbsp;&nbsp;&nbsp;&nbsp;
									</c:if>
								</c:forEach> --%>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" onclick="updateRoleAndAoth()">保存修改</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 修改部门对话框 -->
	<div class="modal fade" id="roleEditDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">修改角色信息</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="editRole_form">

						<input type="hidden" id="addRoleId" name="roleId" />

						<div class="form-group">
							<label for="roleName" class="col-sm-2 control-label">角色名称</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="addRoleName" placeholder="角色名称" name="roleName">
							</div>
						</div>

						<div class="form-group">
							<label for="roleDescription" class="col-sm-2 control-label">角色描述</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="addRoleDescription" placeholder="角色描述" name="roleDescription">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary"
						onclick="updateRole()">保存修改</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 增加部门对话框 -->
	<div class="modal fade" id="roleAddDialog" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">添加角色</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="addRole_form">

						<div class="form-group">
							<label for="aothorityName" class="col-sm-2 control-label">角色名称</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="addRoleName"
									placeholder="角色名称" name="roleName">
							</div>
						</div>

						<div class="form-group">
							<label for="edit_mobile" class="col-sm-2 control-label">角色描述</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="addRoleDescription"
									placeholder="角色描述" name="roleDescription">
							</div>
						</div>

					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" onclick="addRole()">添加</button>
				</div>
			</div>
		</div>
	</div>

	<!-- jQuery -->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
	<%-- <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.4.4.min.js"></script> --%>

	<!-- Bootstrap Core JavaScript -->
	<script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>

	<!-- Metis Menu Plugin JavaScript -->
	<script src="${pageContext.request.contextPath }/js/metisMenu.min.js"></script>

	<!-- DataTables JavaScript -->
	<script
		src="${pageContext.request.contextPath }/js/jquery.dataTables.min.js"></script>
	<script
		src="${pageContext.request.contextPath }/js/dataTables.bootstrap.min.js"></script>

	<!-- Custom Theme JavaScript -->
	<script src="${pageContext.request.contextPath }/js/sb-admin-2.js"></script>

	<script type="text/javascript">
		function updateRoleAndAoth(){
			var roleId = document.getElementById("setRoleAndAothId").value;
			var obj = document.getElementsByName("checkbox");	    
			var check_val = [];
			for(k in obj){	
				if(obj[k].checked){
					check_val.push(obj[k].value);
				}		
			}
			console.log(check_val);
			$.ajax({
				type:"post",
				url:"${pageContext.request.contextPath }/updateRoleAndAoth.action",
		        async:false,
				data: { "check_val": check_val ,"roleId":roleId},//使用这种数组方式的，得加下一句才可以，使用传统方式
				success:function(data) {  
					alert("权限修改成功");
	          		window.location.reload();
				}
			});
		}
 		function showRoleAndAoth(roleId,roleName) {
 			$("#setRoleAndAothId").val(roleId);
 			$("#setRoleAndAothName").val(roleName);
			$.ajax({
				type:"get",
				url:"${pageContext.request.contextPath }/showRoleAndAoth.action",
				data:{"roleId":roleId},
				success:function(data) {
					var str="";
					var i=0;
					for(var key in data){
						i++;
						if(data[key].isChecked>0){
							str+='<input name="checkbox" type="checkbox" autocomplete ="off" checked="checked" id="" value='
								+key
								+'>'
								+data[key].aothority.aothorityName
								+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
						}else{
							str+='<input name="checkbox" type="checkbox" autocomplete ="off" id="" value='
								+key
								+'>'
								+data[key].aothority.aothorityName
								+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
						}
						if(i%3==0){
							str+='</br>';
						}
					}
					$("#jkkjk").html(str);
				}
			});
		}
		function editRole(roleId) {
			$.ajax({
				type:"get",
				url:"${pageContext.request.contextPath }/toUpdateRole.action",
				data:{"roleId":roleId},
				success:function(data) {  
					$("#addRoleId").val(data.roleId);
					$("#addRoleName").val(data.roleName);
					$("#addRoleDescription").val(data.roleDescription)
				}
			});
		}
		function updateRole() {
			$.post(
					"${pageContext.request.contextPath }/updateRole.action",
					$("#editRole_form").serialize(),
					function(data){
						alert("客户信息更新成功！");
						window.location.reload();
					}
			);
		}
		function addRole() {
	        $.post(
	        		"${pageContext.request.contextPath }/addRole.action",
	        		$("#addRole_form").serialize(),
	        		function(data){
		          		alert("角色添加成功！");
		          		window.location.reload();
	        });
	      }
		function deleteRole(roleId) {
			if(confirm('确实要删除该部门吗?')) {
				$.post("${pageContext.request.contextPath}/deleteRole.action",
						{"roleId":roleId},
						function(data){
							alert("客户删除更新成功！");
							window.location.reload();
				});
			}
		}
	</script>




</BODY>
</HTML>
